<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8"/>
	<title>图片合成</title>
</head>
<body>
	<div>
		<input id="fileupload" type="file" name="" accept="image/*">
		<div>价格：<input type="text" name="" value="1000" id="amount"></div>
		<div>赠品：<input type="text" name="" value="" id="gift"></div>
		<button onclick="build()">生成</button>
	</div>
	<div>
		<canvas id="canvas" height="800" width="800"></canvas>
	</div>
	<script type="text/javascript">
		var fileupload = document.getElementById('fileupload')
		var canvas = document.getElementById('canvas')
		var amount = document.getElementById('amount')
		var text = document.getElementById('gift')
		var marker = ''
		var context = canvas.getContext('2d')
		fileupload.addEventListener('change', function(event){
			if(event.target.files.length === 0) return
				build()
		})
		canvas.style.letterSpacing = 0 + 'px'
		function build(){
		 	var reader = new FileReader();
		    var file = fileupload.files[0];
		    context.clearRect(0,0,canvas.width,canvas.height);  
		    reader.onload = function(e) {
		    	var img = new Image()
		    	img.onload = function(){
		    		context.drawImage(img, 0, 0)
		    		var image_marker = new Image()
		    			context.fillStyle = "#ffffff";  //<======= here
		    			context.textAlign = 'center'
		    		image_marker.onload = function(){
		    			context.drawImage(image_marker, 0, 0)
		    			canvas.style.letterSpacing = -2 + 'px'
		    			var height = 720
		    			if(amount.value > 999){
		    				if(gift.value){
						    	context.font = '66px Helvetica Neue Medium'
		    				}else{
		    					canvas.style.letterSpacing = -6 + 'px'
		    					context.font = '78px Helvetica Neue Medium'
		    					height = 730
		    				}
		    			}else{
		    				if(gift.value){
						    	context.font = '78px Helvetica Neue Medium'
		    				}else{
		    					canvas.style.letterSpacing = -4 + 'px'
		    					context.font = '84px Helvetica Neue Medium'
		    					height = 730
		    				}
		    			}
		    			console.log(context.font)
		    			context.fillText(amount.value,670,height);
		    			if(gift.value){
		    			canvas.style.letterSpacing = 0 + 'px'
					    context.font = '18px Helvetica Neue Light'
					    context.textAlign = "center";   
		    			context.fillText(gift.value,675,750);		
		    			}
		    		}
		    		image_marker.src = marker
		    	}
		      	img.src = e.target.result;
		    };
		    reader.readAsDataURL(file);
		}
	</script>
</body>
</html>